<template>
  <div class="app-container">
    <div style="overflow:hidden;">
      <el-input size="small" class="search-btn" v-model="page._filter_like_name" placeholder="用户名/手机"></el-input>
      <el-button type="primary" plain size="small" @click="search(0)" style="margin:0 20px;"><i
        class="el-icon-search"></i>搜索
      </el-button>

      <router-link :to="{name: 'goodsDetail', params: {id: 0}}">
        <el-button type="primary" size="small" class="add-btn-right">新增</el-button>
      </router-link>
      <el-button type="danger" size="small" class="add-btn-right" @click="allDel">批量删除</el-button>
      <el-button type="primary" size="small" class="add-btn-right" @click="allPass(2)">批量上架</el-button>
      <el-button type="danger" size="small" class="add-btn-right" @click="allPass(3)">批量下架</el-button>
    </div>

    <!--<el-tabs v-model="activeName" @tab-click="handleClick">-->
    <!--<el-tab-pane :label="item.name" :name="item.id" v-for="(item,index) in thelabels" :key="index"></el-tab-pane>-->
    <!--</el-tabs>-->
    <el-row :gutter="20">
      <el-col :span="4">
        <ul class="order-ul">
          <li><span style="line-height: 40px">分类列表</span>
            <el-button size="mini" style="float:right;margin-top: 5px" @click="showModel">管理分类</el-button>
          </li>
          <li @click="allData" :class="{'active':itemId === 0}">全部<span class="num">{{us}}</span></li>
          <li v-for="(item,index) in goodsCatrgoryList" :key="index" @click="search(item.id)"
              :class="{'active': item.id === itemId}">{{item.name}} <span class="num">{{item.number}}</span></li>
        </ul>
      </el-col>
      <el-col :span="20">
        <!--<el-radio-group v-model="page._filter_eq_status">-->
        <!--<el-radio :label="item.key" v-for="(item,index) in statusOptions" :key="index">{{item.value}}</el-radio>-->
        <!--</el-radio-group>-->
        <ul class="select">
          <li @click="allData1" :class="{'active':itemID === 0}">全部 {{us}}</li>
          <li v-for="(item,index) in statusOptions" :key="index" :class="{'active': item.key === itemID}"
              @click="searchd(item.key)">{{item.value}} <span>{{item.number}}</span></li>
        </ul>
        <el-table
          v-loading="loading"
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <!--<el-table-column label="序号" width="60">-->
          <!--<template slot-scope="scope">-->
          <!--{{scope.$index + 1 + 10 * (page.page - 1)}}-->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column min-width="100">
            <template slot-scope="scope">
              <div class="order-table-img">
                <img :src="IMGURL+scope.row.mainImgKey" alt=""
                     style="width: 100%;height: 100%;" v-if="scope.row.mainImgKey">
              </div>
              <div class="order-table-div">
                <el-input v-model="scope.row.name" size="mini"></el-input>
                <!--￥-->
                <!--<el-input v-model="scope.row.title" size="mini" class="input-a"></el-input>-->
                库存
                <el-input v-model="scope.row.title" size="mini" class="input-a"></el-input>
                <!--<el-radio-group v-model="scope.row.t" size="mini">-->
                <!--<el-radio-button label="上海"></el-radio-button>-->
                <!--<el-radio-button label="北京"></el-radio-button>-->
                <!--<el-radio-button label="广州"></el-radio-button>-->
                <!--</el-radio-group>-->
                <!--<span>清零 |</span>-->
                <!--<span> 最大 |</span>-->
                <!--<span> 设置</span>-->
                <div>总售</div>
              </div>
              <div class="order-table-div-label">
                <div>
                  描述：
                  <el-input v-model="scope.row.remark" size="mini" class="input-b"></el-input>
                </div>
                标签：
                <el-input v-model="scope.row.title" size="mini" class="input-b"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="60">
            <template slot-scope="scope">
              <span v-if="scope.row.auditingStatus === 1">审核中</span>
              <span v-else-if="scope.row.auditingStatus === 2">通过</span>
              <span v-else-if="scope.row.auditingStatus === 3">不通过</span>
            </template>
          </el-table-column>
          <el-table-column label="原因" width="70" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.auditingRemark}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button type="primary" plain size="mini" @click="toDetail(scope.row.id)">编辑</el-button>
              <el-button type="danger" plain size="mini" @click="del(scope.row.id)" v-if="scope.row.status !== 1">删除
              </el-button>
              <el-button type="danger" plain size="mini" @click="pass(scope.row.id, 3)" v-if="scope.row.status === 2 && scope.row.auditingStatus === 2">
                下架
              </el-button>
              <el-button type="primary" plain size="mini" @click="pass(scope.row.id, 2)" v-if="scope.row.status === 3 && scope.row.auditingStatus === 2">
                上架
              </el-button>
              <!--<el-button type="danger" plain size="mini" @click="pass(scope.row.id, 3)">不通过</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="page.total">
    </el-pagination>

    <!---->
    <el-dialog
      class="goods-dialog"
      title="分类管理"
      :visible.sync="dialogVisible"
      width="50%">
      <el-input placeholder="分类名称" style="width: 200px;" size="small" v-model="category.name"></el-input>
      <el-input placeholder="分类描述" style="width: 200px;" size="small" v-model="category.description"></el-input>
      <el-button size="small" @click="addGoodsCategory">添加分类</el-button>
      <p>1、输入分类名称和描述，点击“添加分类”新增分类</p>
      <p>2、可以拖动分类进行排序</p>
      <li v-for="item1,index in goodsCatrgoryList" :key="index"
          v-dragging="{ item: item1, list: goodsCatrgoryList, group: 'item1' }">
        <span>分类名称：</span>
        <el-input v-model="item1.name" style="width: 200px;" size="small"></el-input>
        <el-input placeholder="添加描述" style="width: 200px;" size="small" v-model="item1.description"></el-input>
        <el-button size="small" type="primary" plain style="margin-left: 10px" @click="categorySave(item1)">修改
        </el-button>
        <el-button size="small" type="danger" plain style="margin-left: 0" @click="categoryDel(item1.id)">删除</el-button>
        <!--<i class="el-icon-error"></i>-->
      </li>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveList">确 定</el-button>

  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { IMGURL } from '@/utils/imgurl'
  import { page } from '../../../mixins/index'
  import { goods_category_list, goods_categpry_add, goods_categpry_status, goods_categpry_change, goods_categpry_del, goods_page, goods_del, goods_status, goods_del_all, goods_status_all, goods_number } from '../../../api/index'

  export default {
    mixins: [page],
    data() {
      return {
        IMGURL: IMGURL,
        loading: true,
        statusOptions: [
          { key: 1, value: '申请中' },
          { key: 2, value: '售卖中' },
          { key: 3, value: '已下架' }
        ],
        category: {},
        dialogVisible: false,
        tableData: [],
        value: {},
        goodsCatrgoryList: [],
        list: [],
        ids: [],
        itemId: 0,
        itemID: 0,
        us: 0
      }
    },
    methods: {
      showPic(url) {
        this.$store.dispatch('PicPreview', url).catch()
      },
      allData() {
        this.itemId = 0
        this.page._filter_eq_status = ''
        delete this.page._filter_eq_brandCategoryId
        // console.log(this.page)
        this.getInfo()
      },
      allData1() {
        this.itemID = 0
        this.page._filter_eq_status = ''
        delete this.page._filter_eq_status
        // console.log(this.page)
        this.getInfo()
      },
      searchd(id) {
        this.itemID = id
        this.page._filter_eq_status = this.itemID
        if (this.itemId !== 0) {
          this.page._filter_eq_brandCategoryId = this.itemId
        }

        this.getInfo()
      },
      search(id) {
        // console.log(id, 852)
        if (id) {
          this.itemId = id

          this.page._filter_eq_brandCategoryId = this.itemId

          if (this.itemID !== 0) {
            this.page._filter_eq_status = this.itemID
          }
        }
        this.getInfo()
      },
      pass(id, val) {
        const params = {
          id: id,
          content: { status: val }
        }
        let text = ''
        if (val === 2) {
          text = '上架'
        } else if (val === 3) {
          text = '下架'
        }
        this.$confirm(`确定要${text}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          goods_status(params).then(res => {
            this.dialogVisible = false
            // console.log(res)
            this.$message({ type: 'success', message: '操作成功' })
            this.getInfo()
            // this.$router.go(-1)
          })
        }).catch(() => {
          console.log('cancel pass')
          // this.$message({ type: 'warning', message: '放弃操作' })
        })
      },
      handleSelectionChange(val) {
        console.log(val)
        var params = []
        val.forEach(item => {
          params.push(item.id)
        })
        // console.log(params)
        const ids = params.join(',')
        this.ids = ids
        // console.log(this.ids)
      },
      allDel() {
        if (this.ids.length === 0) {
          this.$message({ type: 'warning', message: '请选择商品' })
          return
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          goods_del_all(this.ids).then(res => {
            // console.log(res)
            this.getInfo()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      allPass(val) {
        console.log(this.ids)
        if (this.ids.length === 0) {
          this.$message({ type: 'warning', message: '请选择商品' })
          return
        }
        const params = {
          id: this.ids,
          content: { status: val }
        }
        // console.log(params)
        let text = ''
        if (val === 2) {
          text = '上架'
        } else if (val === 3) {
          text = '下架'
        }
        this.$confirm(`确定要${text}吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          goods_status_all(params).then(res => {
            // console.log(res)
            this.$message({ type: 'success', message: '操作成功' })
            this.getInfo()
            this.ids = []
          })
        }).catch(() => {
          console.log('cancel pass')
          // this.$message({ type: 'warning', message: '放弃操作' })
        })
      },
      del(id) {
        const params = {
          id: id
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          goods_del(params).then(res => {
            // console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getInfo()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      getInfo() {
        goods_page(this.page).then(res => {
          console.log(res, 888888)
          this.tableData = res.content
          this.page.total = res.totalElements
          // console.log(this.page, 777777777)
          this.loading = false
          this.getGoodsNumber()
        })
      },
      toDetail(id) {
        this.$router.push({ name: 'goodsDetail', params: { id: id }})
      },
      showModel() {
        this.getGoodsCategory()
        this.dialogVisible = true
      },
      getGoodsCategory() {
        goods_category_list().then(res => {
          // console.log(res, 11111)
          this.goodsCatrgoryList = res.brandProductCategoryList
          // this.dialogVisible = true
          console.log(this.goodsCatrgoryList, 55555)
          this.getGoodsNumber()
        })
      },
      addGoodsCategory() {
        console.log(this.category)
        if (!this.category.name || !this.category.description) {
          this.$message({ type: 'warning', message: '请填写名称和描述' })
          return
        } else if (this.category.name.length > 10) {
          this.$message({ type: 'warning', message: '名称长度不超过10个字符' })
          return
        }
        if (this.category.description.length > 32) {
          this.$message({ type: 'warning', message: '描述长度不超过32个字符' })
          return
        }
        goods_categpry_add(this.category).then(res => {
          // console.log(res)
          this.$message({ type: 'success', message: '添加成功' })
          this.category = {}
          this.getGoodsCategory()
        })
      },
      categoryDel(id) {
        const params = {
          id: id
        }
        delete
        // console.log(params)
        goods_categpry_del(params).then(res => {
          console.log(res)
          this.$message({ type: 'success', message: '删除成功' })
          this.getGoodsCategory()
        })
      },
      categorySave(item) {
        if (!item.name || !item.description) {
          this.$message({ type: 'warning', message: '请填写名称和描述' })
          return
        } else if (item.name.length > 10) {
          this.$message({ type: 'warning', message: '名称长度不超过10个字符' })
          return
        }
        if (item.description.length > 32) {
          this.$message({ type: 'warning', message: '描述长度不超过32个字符' })
          return
        }
        goods_categpry_change(item).then(res => {
          // console.log(res)
          this.$message({ type: 'success', message: '修改成功' })
          this.getGoodsCategory()
        })
      },
      saveList() {
        const params = {
          categoryVos: this.list
        }
        // console.log(params, 123)
        goods_categpry_status(params).then(res => {
          // console.log(res)
          this.$message({ type: 'success', message: '保存成功' })
          // this.goodsCatrgoryList = []
          // this.getGoodsCategory()
          this.dialogVisible = false
        })
      },
      getGoodsNumber() {
        goods_number().then(res => {
          // console.log(res, 88888888888888)
          res.forEach(item => {
            this.goodsCatrgoryList.forEach(item1 => {
              if (item.categoryId === item1.id) {
                item1.number = item.quantity
              } else if (item.categoryId === 0) {
                this.us = item.quantity
              }
              if (item1.number === undefined) {
                item1.number = 0
              }
            })
            this.statusOptions.forEach(item2 => {
              if (item.status === item2.key) {
                item2.number = item.quantity
              }
              if (item2.number === undefined) {
                item2.number = 0
              }
            })
          })
        })
      }
    },
    mounted() {
      this.getInfo()
      this.$dragging.$on('dragged', ({ value }) => {
        console.log(this.goodsCatrgoryList, 963)
        // console.log(value.item, 1)
        // console.log(value.list, 2)
        // console.log(value.group, 3)
        console.log(value)
        this.list = this.goodsCatrgoryList
        // console.log(value, 8)
      })
      this.getGoodsCategory()
      // goods_category_list().then(res => {
      //   // console.log(res, 321)
      //   this.goodsCatrgoryList = res.brandProductCategoryList
      //   this.getGoodsNumber()
      // })
    }
  }
</script>

<style lang="scss" scoped src="./index.scss">

</style>
